<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>直推用户</title>
    <!-- 引入 WeUI CDN 链接 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
    <link rel="stylesheet" href="./css/base.css"/>
    <style>
        .sorted{
            background-color: #fff;

        }
        .sorted > i{
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #222;
            padding-top: 3px;
            display: inline-block;
        }
        .btn{
            cursor:pointer
        }
        .list-div {
            width: 90%;margin: 10px auto;font-size: 15px;color: #222222
        }

        .list-div > p span{
            vertical-align:bottom;
        }
    </style>
</head>
<body>
<div class="page">
    <div style="height: 50px;line-height: 50px;background-color: #f7f7f7;">
        <a href="/user" ><img src="./img/back.png"  style="vertical-align:middle;width: 20px">
            <span style="color: #000;vertical-align:middle;font-weight: bold">返回</span>
        </a>
    </div>
    <div>
        <div style="margin: 15px 5%;">
            <span style="font-size: 15px;color: #666">选择排序方式</span>
            <select name="" id="sort-select" onchange="toPage()" style="height: 28px;font-size: 14px;color: #333;border-radius: 5px">
                @foreach(['ac' => '按业绩', 'ta' => '按总业绩', 'tu' => '按总人数', 'ct' => '按加入时间'] as $k => $v)
                    <option value="{{$k}}" @if($sort == $k) selected @endif>{{$v}}</option>
                @endforeach
            </select>
        </div>

        @foreach($userList as $user)
            <div class="list-div"  onclick="alertMyId({{$user->miyou_id}})">
                <div>
                    <span style="font-weight: bold">{{$user->nickname}}</span>
                    <span style="float: right;font-size: 14px;color: #666">注册时间：{{ $user->create_time}}</span>
                </div>
                <p style="margin: 4px 0">
                    <img style="width: 28px;vertical-align:middle;" src="/img/jiangjinmx.png" alt="">
                    <span>个人业绩</span> <span style="float: right;"><b style="font-size: 18px">{{$user->my_achievement}}</b>元</span>
                </p>
                <p style="margin: 4px 0"><img style="width: 28px;vertical-align:middle;" src="/img/jinhuodl.png" alt="">
                    <span>团队总人数</span> <span style="float: right;"><b style="font-size: 18px">{{$user->all_user}}</b>人</span></p>
                <p style="margin: 4px 0"><img style="width: 28px;vertical-align:middle;" src="/img/woyaotx.png" alt="">
                    <span>团队总业绩</span> <span style="float: right;"><b style="font-size: 18px">{{$user->achievement}}</b>元</span></p>
            </div>
            <hr>
        @endforeach
    </div>
    <div class="js_dialog" id="dialog" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd"></div>
            <div class="weui-dialog__ft">
                <a href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
            </div>
        </div>
    </div>
</div>
<script src="./js/zepto.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#dialog').on('click', '.weui-dialog__btn', function(){
            $(this).parents('.js_dialog').fadeOut(200);
        });
    })


    function toPage() {
        window.location.href = '/recommend?sort=' + $("#sort-select").val()
    }
    function alertMyId(miyouId) {
        $('#dialog .weui-dialog__bd').text("学号：" + miyouId);
        $('#dialog').fadeIn(200);
    }



</script>
</body>
</html>